<template>
	<div>
		<el-container>
		  <el-aside width="40%">
			<p v-html="markdown"></p>
			  </el-aside>
		  <el-main>
			  <el-input type="textarea" :row="4"  v-model="content" placeholder="请输入内容"></el-input>
		  </el-main>
		</el-container>
		
	</div>
</template>
<script>
	import MarkdownIt from"markdown-it";
	export default{
		data() {
			return{
				content: '',
			};
		},
		computed: {
			markdown() {
				const md=new MarkdownIt();
				const result=md.render(this.content);
				return result;
			}
			
		}
	};
</script>

<style>
	*{
		margin: 0;
		padding: 0;
		height: 100%;
		
	}
	.el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;
	  }
	  .el-aside {
	      background-color: #D3DCE6;
	      color: #333;
	      text-align: center;
	      line-height: 200px;
	    }
		/deep/.el-aside {
		    background-color: #D3DCE6;
		    color: #333;
		}
		/deep/#app {
		    font-family: 'Avenir', Helvetica, Arial, sans-serif;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		    /* text-align: center; */
		    color: #2c3e50;
		}
</style>